<template>
<div id="ChooseUser" class="page-blank">
  <van-nav-bar title="选择人员" left-arrow @click-left="close()"/>
  <van-search v-model="searchValue" placeholder="请输入搜索关键词" show-action shape="round">        
    <div class="ft-blue" slot="action" @click="getList">搜索</div>
  </van-search>
  <div class="flex-body">
    <div class="people-box" v-for="(v,i) in list" :key="i" style="font-size: 0.24rem;">
      <div class="people-title">
        <img :src="v.icon || '../../assets/user.png'" style="display: inline-block;">
        <div class="left">
          <div>{{v.nick}}</div>
        </div>
        <div class="right">
          <div class="btn" @click="confirm(v)">确定</div>
        </div>
      </div>
      <div class="data-main">
        <div><span class="label">用户ID：</span><span class="value">{{v.userId}}</span></div>
        <div><span class="label">用户来源：</span><span class="value">{{v.userType===1?'微信':'支付宝'}}</span></div>
      </div>
    </div>
  </div>
</div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import axios from '@/utils/request';

@Component
export default class ChooseUser extends Vue {

  @Prop()
  cb: any

  @Prop()
  close: any

  @Prop()
  oldValue: any
  
  searchValue: any = ''
  value: any = ''
  list: any = []
  page: any = 1
  loading: any = false
  finished: any = false

  onSearch() {
    this.page = 1
    this.list = [];
    this.loading = true;
    this.finished = false;
    this.getList();
  }
  getList() {
    if(!this.searchValue) return ;
    axios.get('/api/user/wxAndZfbUser', { userId: this.searchValue }).then((res: any) => {
      this.list = res ? [ res ] : [];
    });
  }
  confirm(v: any) {
    this.cb(v);
  }

  mounted() {
    this.value = this.oldValue;
    this.getList();
  }
  
};
</script>

<style lang="scss">
#ChooseUser {
}
</style>

